<template>
  <div>
      <ul>
        <li :style="{opacity}">欢迎~</li>
        <!-- 验证缓存路由组件 -->
        <li>news001<input type="text"/></li>
        <li>news002<input type="text"/></li>
        <li>news003<input type="text"/></li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'News',
    data(){
      return{
        opacity:1
      }
    },
    //两个新的生命周期钩子（路由组件独有的）在生命周期图中没有体现的三个钩子，下面是其中两个，还有一个是nextTick()vue把dom放到页面时调用的函数
    activated(){//激活
      console.log('News组件被激活了')
      this.timer=setInterval(()=>{
        console.log('@')
        if(this.opacity<=0)this.opacity=1
      },16)
    },
    deactivated(){//失活
         console.log('News组件失活了')
         clearInterval(this.timer)
    }
}
</script>

<style>

</style>